<template>
  <view class="morePage">
    <!-- 标题 -->
    <shopro-navbar
      back-icon-color="#020202"
      :background="{ background: '#fff' }"
      @backHandler="goBack"
      :backTextStyle="{
        color: '#020202',
        fontSize: '36rpx',
        fontWeight: '400',
      }"
      :isBack="true">
      <view slot="content" class="u-flex nav-wrap">
        <view class="nav-item">
          {{ title }}
        </view>
      </view>
    </shopro-navbar>
	  <shopro-search :input_text="search_val" :status_bar_height="statusBarHeight" @onSearchNameApi="onSearchName()"></shopro-search>
    <view class="moreContent":style="{'margin-top':statusBarHeight+'px'}" v-if="title == '名师'">
      <view
        class="moreList"
        v-for="(item, index) in list"
        :key="index"
        @click="handleDetail(item)">
        <image class="imgs" :src="item.image" mode="aspectFill"></image>
        <view class="moreRight">
          <text class="name">{{ item.name }}</text>
          <view class="hite" v-html="item.desc"></view>
        </view>
      </view>
    </view>

    <view class="moreContentCom":style="{'margin-top':statusBarHeight+'px'}" v-if="title == '公司'">
      <view
        class="moreList"
        v-for="(item, index) in list"
        :key="index"
        @click="handleDetail(item)">
        <image class="imgs" :src="item.image" mode="aspectFill"></image>
        <view class="moreRight">
          <text class="name">{{ item.project_name }}</text>
          <view class="companyType" v-html="item.project_content"></view>
        </view>
      </view>
    </view>
	  <shopro-empty v-if="list.length==0" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无内容~"></shopro-empty>
  
  </view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      title: "",
      list: [],
	    store_key: "search_list",
	    search_val:"",
	    statusBarHeight: systemInfo.statusBarHeight*2-8
    };
  },
  props: {},
  onLoad(options) {
    this.title = options.type == "1" ? "名师" : "公司";
  },
  computed: {},
  created() {},
  onShow() {
	  this.list=[];
    this.getlist(this.title);
  },
  methods: {
    getlist(type) {
      if (type == "名师") {
        this.$new_http("finance.teachlist", {
          type: type == "名师" ? "0" : "1",
	        search:this.search_val
        }).then((res) => {
          console.log(res.data.data);
          this.list = res.data.data;
        });
      } else {
        this.$new_http("finance.companyList", {
	        search:this.search_val
        }).then((res) => {
          this.list = res.data.data;
        });
      }
    },
	  onSearchName(val){
		this.search_val = val;
		  this.list = [];
		  this.getlist(this.title);
		
	  },
    handleDetail(val) {
      console.log(val);
      if (this.title == "名师") {
        uni.navigateTo({
          url: "/pages/finance/teacherDetail?val=" + val.id,
        });
      } else {
        uni.navigateTo({
          url: "/pages/finance/companyDetail?val=" + val.id,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.morePage {
  background: #f7f7f7;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);

  .nav-wrap {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    width: 100%;
	  font-size: 32rpx;
  }

  .moreContent {
	  margin-top: 84rpx;
    padding: 0 30rpx;

    .moreList {
      width: 100%;
      padding: 30rpx 10rpx 30rpx 21rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 20rpx;
      display: flex;

      .imgs {
        width: 170rpx;
        height: 170rpx;
        border-radius: 50%;
      }

      .moreRight {
        width: 431rpx;
        margin-left: 28rpx;
        .companyType {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
        .name {
          font-family: PingFang;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }

        .hite {
          margin-top: 20rpx;
          font-family: PingFang;
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          line-height: 42rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  // 公司
  .moreContentCom {
	  margin-top: 84rpx;
    padding: 0 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .moreList {
      width: 327rpx;
      padding: 30rpx 10rpx 30rpx 21rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 20rpx;
      // display: flex;

      .imgs {
        width: 150rpx;
        height: 150rpx;
        margin-right: 24rpx;
        border-radius: 50%;
        display: block;
        margin: 20rpx auto 26rpx;
      }

      .moreRight {
        // width: 431rpx;
        margin-left: 28rpx;
.companyType {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
        .name {
          font-family: PingFang;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }

        .hite {
          margin-top: 20rpx;
          font-family: PingFang;
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          line-height: 42rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
